// 引入react
import React, {PureComponent} from 'react';
// 引入核心grid组件
import ScGridTable from '../../../components/display/table/gridTableCore';
// 定义业务的接口对象
import { errorCorrection } from '../../../fetch/fetchApi';
import {initModals} from "../../../state/action/comAction";
import PropTypes from 'prop-types';

class ThumbTable extends PureComponent{
  constructor (props) {
    super(props);

    // 获取父组件传递的参数
    this.props = props;

    // 初始定义表格数据
    this.generateSchema();
  }

  static contextTypes = {
    store: PropTypes.object.isRequired
  };

  // 表格列的定义
  generateSchema () {
    this.state = {
      tableConfig : {
        tableColumns : [
          {
            name: '用户账号',
            key: 'account',
            colType: 'textCol', // 固定列
            fix: 'left'
          }, {
            name: '电站名称',
            key: 'stubGroupName',
            colType: 'tipCol'// 普通文字列
          }, {
            name: '电桩编号',
            key: 'stubGroupId',
            colType: 'tipCol' // 超出省略带提示的列
          }, {
            name: '纠错内容',
            key: 'errorInfo',
            colType: 'tipCol' // 超出省略带提示的列
          },
          {
            name: '图片',
            key: 'fullURL',
            colType: 'thumbImage' // 图片列-可预览
          },
          {
            name: '操作',
            key: 'action',
            fix: 'right',
            colType: 'action', // 操作列，可定义多种操作。
            actionMap: [
              {
                type: 'href',
                actionName: '操作角色',
                handler: (res) => {
                  this.editeContent(res);
                }
              }
            ]
          }
        ],
        tableParam: {
          pageCount: 10
        },
        tableInfo: {
          hasRow: !1 // 是否显示checkbox
        },
        tableChange: () => {
          console.log('change');
        },
        dataApi: errorCorrection,
        scroll: true
      }
    }
  }

  // 自定义事件， 用户自行定义对应业务逻辑

  editeContent (res) {
    this.context.store.dispatch(initModals('writeModal', res.account));
  }

  render () {
    // 用户只需要传入接口对象和配置的列信息即可
    return <ScGridTable config={this.state.tableConfig}
    />;
  }

}

// 最后我们得到自定义的gridTable,放置到业务page中。
export default ThumbTable;